// AppTabScreen.kt
package com.tencent.compose.sample

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.* // remember, mutableStateOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp


/**
 * Compose implementation of AppTabPage (simplified).
 *
 * - AppHomeScreen is used for tab 0.
 * - Other tabs show AppEmptyScreen (with title).
 * - Icons are simple placeholder circles with the icon name as text.
 *
 * Replace placeholder image drawing with your own image loader (painterResource, AsyncImage, etc).
 */
/** Empty page shown for non-home tabs. */
@Composable
internal fun AppEmptyScreen(title: String) {
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
        Box(contentAlignment = Alignment.Center) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text(text = title, fontSize = 24.sp, color = MaterialTheme.colors.onBackground)
                Spacer(modifier = Modifier.height(6.dp))
                Text(text = "Placeholder content", color = MaterialTheme.colors.onBackground.copy(alpha = 0.7f))
            }
        }
    }
}

@Composable
internal fun AppTabScreen(
    titles: List<String> = listOf("Home", "Video", "Discover", "Message", "Me"),
    icons: List<String> = listOf("home", "video", "discover", "msg", "me"),
    initialSelectedIndex: Int = 0,
    tabBarHeightDp: Int = 80,
    onTabSelected: ((index: Int) -> Unit)? = null
) {
    var selectedIndex by remember { mutableStateOf(initialSelectedIndex.coerceIn(0, titles.size - 1)) }
    val bgColor = MaterialTheme.colors.background
    val tabBackground = MaterialTheme.colors.surface
    val textFocused = MaterialTheme.colors.primary
    val textUnfocused = MaterialTheme.colors.onSurface
    Column(modifier = Modifier.fillMaxSize().background(bgColor)) {
        Spacer(modifier = Modifier.height(0.dp))
        Box(modifier = Modifier
            .weight(1f)
            .fillMaxSize()
        ) {
            when (selectedIndex) {
                0 -> AppHomePreview()
                else -> AppEmptyScreen(title = titles.getOrNull(selectedIndex) ?: "Page ${selectedIndex + 1}")
            }
        }
        Row(
            modifier = Modifier
                .height(tabBarHeightDp.dp)
                .fillMaxSize()
                .background(tabBackground),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            val count = titles.size.coerceAtLeast(icons.size)
            for (i in 0 until count) {
                val title = titles.getOrNull(i) ?: "Tab $i"
                val iconName = icons.getOrNull(i) ?: title.lowercase()
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .weight(1f)
                        .clickable {
                            selectedIndex = i
                            onTabSelected?.invoke(i)
                        }
                        .padding(vertical = 6.dp)
                ) {
                    PlaceholderIcon(
                        text = iconName,
                        isSelected = (i == selectedIndex),
                        sizeDp = 30
                    )
                    Spacer(modifier = Modifier.height(6.dp))
                    Text(
                        text = title,
                        fontSize = 12.sp,
                        color = if (i == selectedIndex) textFocused else textUnfocused,
                        textAlign = TextAlign.Center
                    )
                }
            }
        }
    }
}

@Composable
private fun PlaceholderIcon(text: String, isSelected: Boolean, sizeDp: Int = 30) {
    val bg = if (isSelected) MaterialTheme.colors.primary else MaterialTheme.colors.onSurface.copy(alpha = 0.08f)
    val fg = if (isSelected) Color.White else MaterialTheme.colors.onSurface
    Box(
        modifier = Modifier
            .size(sizeDp.dp)
            .clip(CircleShape)
            .background(bg),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = text.take(2).uppercase(),
            color = fg,
            fontSize = 12.sp,
            textAlign = TextAlign.Center
        )
    }
}
@Composable
internal fun AppHomeScreen() {
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text("App Home", fontSize = 28.sp, color = MaterialTheme.colors.primary)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "This is the placeholder for the original AppHomePage.\nReplace with your real Compose content.",
                textAlign = TextAlign.Center,
                color = MaterialTheme.colors.onBackground
            )
        }
    }
}

@Composable
internal fun PreviewAppTabScreen() {
    AppTabScreen()
}
